<template>
  <!-- 头部组件 -->
  <header class="app-Header">
    <div class="container">
      <h1 class="logo"><router-link to="/"></router-link></h1>
      <AppHeadNav />
      <!-- 搜索框 -->
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>

      <!-- 购物车图标 -->

       <AppHeaderCart />

    </div>
  </header>
</template>

<script>
import AppHeadNav from './children/app-head-nav.vue'
import AppHeaderCart from './app-header-cart.vue'
export default {
  name: 'AppHeader',
  components: {
    AppHeadNav,
    AppHeaderCart
  }
}
</script>

<style lang="less" scoped>
.app-Header {
  background: #fff;
  .container {
    display: flex;
    align-items: center;
    .logo {
      width: 200px;
      a {
        display: block;
        height: 132px;
        width: 100%;
        text-indent: -9999px; // 文本缩进
        background: url(../assets/images/logo.png) no-repeat center 18px/ contain; // contain按比例调整背景图片
      }
    }

    .search {
      border-bottom: 1px solid #cdcdcd;
      i {
        margin-right: 5px;
      }
    }

    .cart {
      margin-left: 5px;
      position: relative;
      em {
        position: absolute;
        top: -6px;
        right: -12px;
        width: 18px;
        height: 14px;
        font-size: 8px;
        color: #fff;
        text-align: center;
        line-height: 14px;
        background-color: red;
        border-radius: 50%;
        font-family: Arial;
      }
    }
  }
}
</style>
